{% extends "base.html" %}

{% block head %}
{{ super() }}
{% endblock %}

{% block import_area %}
{{ super() }}
<script src="{{url_for('static', filename='../static/js/control/zform.js')}}"
	type="text/javascript" charset="utf-8"></script>
{% endblock %}


{% block js_code %}
{{ super() }}	
<script>
	$(document).ready(function(){
		var $LoginForm = $('#login-form').ZForm({height:200});
	});
	
</script>
{% endblock %}

{% block content %}

<div class="container">
	<div class="col-md-6 col-md-offset-6">	
		<div id="login-dialog" class="panel panel-default">
			<div class="panel-heading">
				<span class="glyphicon glyphicon-lock"></span> Login</div>
			<div class="panel-body">
				<form id="login-form" action="/login" method="post">
					<div class="row form-group col-md-12">
						<div class="z-label col-md-2">{{ 'Account' }}</div>
						<div class="col-md-6">
							<input class="form-control z-input" type="text"  name="account" placeholder="{{ 'Username or Email' }}" />
						</div>
						<div class="col-md-4 z-hint"></div>
					</div>
			
					<div class="row form-group col-md-12">
						<div class="z-label col-md-2">{{ 'Password' }}</div>
						<div class="col-md-6">
							<input class="form-control z-input" type="password"  name="password" placeholder="{{ 'Enter password' }}" />
						</div>
						<div class="col-md-4 z-hint"></div>
					</div>
			
					<div class="row form-group col-md-12">
						<div class="col-md-offset-2 col-md-4">
							<div class="checkbox">
								<label>
									<input type="checkbox" name="remember-me" />{{ 'Remember me' }}
								</label>
							</div>
						</div>
					</div>
					<div class="form-group last">
						<div class="col-sm-offset-2 col-md-5">
							<button id="sign-in-btn" type="submit" class="btn btn-success">{{ 'Sign in' }}</button>
						</div>
					</div>
				</form>
			</div>
			<div class="panel-footer">
				{{ 'New to Youxue?' }} <a href="/signup">{{ 'Sign up now' }}</a>
			</div>
		</div>
	</div>
</div>
{% endblock %}